<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>红包雨</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <!--在iPhone 手机上禁止了把数字转化为拨号链接-->
    <meta content="telephone=no" name="format-detection" />
    <!--删除默认的苹果工具栏和菜单栏-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- 网站开启对web app程序的支持，在web app应用下状态条（屏幕顶部条）的颜色，默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/app/{{$activity_template}}/css/index.css" type="text/css"/>
    <link rel="stylesheet" href="/app/{{$activity_template}}/css/animate.min.css" type="text/css"/>
    <script type="text/javascript" src="/app/{{$activity_template}}/js/jquery.min.js"></script>
    <script type="text/javascript" src="/app/{{$activity_template}}/js/layer/layer.js"></script>
    <script type="text/javascript">
        $.fn.extend({
            animateCss: function (animationName) {
                var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
                this.addClass('animated ' + animationName).one(animationEnd, function() {
                    $(this).removeClass('animated ' + animationName);
                });
            }
        });

        //ajax 请求回来或后台给的数据
        var data = {
            time :{{$time}},//抢红包时间
            minNum : 10,//最低中奖红包数
            speed : 8,//红包降落动画的时间
            bgSrc:'{{$background}}'
        }
        if (!data['bgSrc']){
            data['bgSrc'] = '/app/{{$activity_template}}/img/bg.jpg';
        }

        //增加红包
        var redPacket = {
            //游戏状态值data
            data:{
                time :30,//抢红包时间
                num : 0,//添加红包计数器
                rNum :0,//抢的红包数量
                minNum :30,//最低中奖红包数
                speed :  8,//红包降落动画的时间
                bgSrc : '/app/{{$activity_template}}/img/bg.jpg',//游戏背景
                type : 'left',//有值左飘left,垂直票vertical
                pop:true//是否显示状态栏
            },
            animateEvent : 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
            html : {
                //带拆红包
                redPacket:'<div class="redPacketWrap"><div class="redPacket"><div class="redPacket_open" style="background-image:url(/app/{{$activity_template}}/img/cashBonus.jpg)"></div></div></div><div style="height:200px"></div><div class="redRainPop"><p class="p1">赞助商名称</p><p class="p2">收到新红包啦</p></div>',
                //没有中奖
                notWinning : '<div class="redRainPop"><div class="popImg"><img src="/app/{{$activity_template}}/img/notWinning.jpg"/></div><p class="p1">好可惜，没有戳中有奖红包</p><p class="p2">下次活动再接再励，记得参加哦</p></div>',
                //获得奖品
                getPrize : '<div class="redRainPop"><div class="popImg"><img src="/app/{{$activity_template}}/img/notWinning.jpg"/></div><p class="p1">恭喜你获得XXX奖品</p></div>',
                //现金红包
                cashBonus: '<div class="redRainPop"><div class="popImg"><img src="/app/{{$activity_template}}/img/cashBonus.jpg"/></div><p class="p1">恭喜你获得现金红包</p><p class="p2">已通过公众号/服务号通知发放请查收</p></div>',
                //卡片红包
                card: '<div class="redRainPop"><div class="popImg"><img src="/app/{{$activity_template}}/img/cashBonus.jpg"/></div><p class="p1">恭喜你获得XXX奖品</p><p class="p2 mb0 mt0">卡券密码</p><p class="p2 mt0">12121212121212</p></div>',
                //用户信息
                infor:'<div class="redRainPop"><p class="p1">请输入联系方式用于领奖</p><input type="text" placeholder="姓名" name="username"/><input type="text"  placeholder="联系电话"  name="phonenum"/></div>',
            },
            //设置data
            setData:function(obj){
                $.extend(this.data,obj);
            },
            //初始化红包雨
            init:function(){
                this.setData(data);
                //背景图片
                $('body').css({
                    background:'url('+this.data.bgSrc+") no-repeat top left",
                    backgroundSize:'cover'
                })
                $('#main').html('');
                redPacket.removeDom();
                window.redPacketAdd = setInterval(redPacket.add.bind(this),500);
                redPacket.add();
                $('#rTime').html(this.data.time);
//                window.redPacketTime =  setInterval(function(){
//                    --this.data.time;
//                    $('#rTime').html(this.data.time);
//                }.bind(this),1000);
            },
            //当动画执行结束的移除Dom节点
            removeDom : function(){
                $('#main').on(redPacket.animateEvent,'li',function(){
                    $(this).remove();
                });
            },
            add : function() {//添加红包
                var data = this.data;
                //游戏快慢飘得方向切换
                if(data.time <= 0){
                    if(data.minNum <= data.rNum){
                        $('body').append('<div class="shade"></div>');
                        layer.open({type: 2});
                        setTimeout(function(){
                            $('.shade').remove();
                            layer.open({
                                content: redPacket.html.redPacket,
                                className:'animated bounceInDown',
                                shadeClose: false,
                                anim:false,
                            });
                        },5000)


                    }else{
                        layer.open({
                            content: this.html.notWinning,
                            className:'animated bounceInDown',
                            shadeClose: false,
                            anim:false,
                            btn : '重新玩一次',
                            yes : function(){
                                //重新初始化游戏
                                layer.closeAll();
                                //初始化传入的数据
                                redPacket.setData({
                                    time :30,
                                    num :0,
                                    rNum :0,
                                    speed : 8,
                                    type :'left'
                                })
                                setTimeout(function(){
                                    redPacket.init();
                                },10)

                            }
                        });
                    }
                    //$('#topBar').css('display','none');
                    clearInterval(redPacketAdd);
                    clearInterval(redPacketTime);
                }else if(data.time == 26){
                    this.data.type = 'vertical';
                }else if(data.time == 20){
                    this.data.type = 'left';
                }else if(data.time == 15){
                    this.data.type = 'vertical';
                }else if(data.time == 8){
                    this.data.type = 'left';
                }else if(data.time == 28){
                    this.data.speed = 5;
                }else if(data.time == 26){
                    this.data.speed = 4;
                }else if(data.time == 22){
                    this.data.speed = 3;
                }


                this.data.num++;
                var num = this.data.num;
                var rotate = this.data.type == 'left' ? 30 : 0;
                var win = (parseInt($(".main").css("width"))) - 60;
                var hb = parseInt(Math.random() * (3 - 1) + 1);
                var Wh = parseInt(Math.random() * (120 - 50) + 50);
                var Left = parseInt(Math.random() * (win - 100) + 100);
                var rot = (parseInt(Math.random() * (rotate - 0) - 0)) + "deg";

                $(".main").append("<li class='li" + num + "' ><img src='/app/{{$activity_template}}/img/redPacket.png'></li>");
                $(".li" + num).css({
                    "left": Left,
                    "animation": "redPack_"+this.data.type+" "+this.data.speed+"s ease-out"
                });
                $(".li" + num +" img").css({
                    "width": Wh,
                    "transform": "rotate(" + rot + ")",
                    "-webkit-transform": "rotate(" + rot + ")",
                    "-ms-transform": "rotate(" + rot + ")", /* Internet Explorer */
                    "-moz-transform": "rotate(" + rot + ")", /* Firefox */
                    "-webkit-transform": "rotate(" + rot + ")",/* Safari 和 Chrome */
                    "-o-transform": "rotate(" + rot + ")" /* Opera */
                });
            },
            //点中红包后删除红包
            del : function(_this){
                ++this.data.rNum;
                var offset = _this.offset();
                var addNumHtml = '<div class="addNum" id="addNum_'+this.data.rNum+'"></div>'
                $('body').append(addNumHtml);
                $('#addNum_'+this.data.rNum).css({
                    left :offset.left,
                    top :offset.top
                }).addClass('animated slideInUp').one(redPacket.animateEvent, function(){
                    $(this).removeClass('animated slideInUp');
                    $(this).addClass('animated zoomOut').one(redPacket.animateEvent, function(){
                        $(this).remove();
                    });
                });

                _this.addClass('animated zoomOut').one(redPacket.animateEvent, function(){
                    $(this).remove();
                });
                $('#rNum').html(this.data.rNum);
            }



        }
        $(document).ready(function(){

            redPacket.init();
            //禁止页面默认上下滑动
            document.ontouchmove = function(e){
                e.preventDefault();
            }
            //拆红包事件
            $(document).on('touchstart','.redPacket_open',function(e){
                e.preventDefault();
                $(this).addClass('rotate');
                //ajax请求数据 根据后台返回弹出不同的弹层
                setTimeout(function(){
                    $(".layui-m-layerchild").addClass('zoomOutDown').one(redPacket.animateEvent, function(){
                        layer.closeAll();
                        layer.open({
                            content:redPacket.html.card,
                            className:'animated bounceInUp',
                            shadeClose:false,
                            anim:false,
                            btn:'确认'
                        });
                    });
                },2000)

            })

            $("#main").css({"height":$(document).height()*1.6,"width":$(document).width()});
            $(document).on('touchstart', '#main li img', function(e) {
                e.preventDefault();
                redPacket.del($(this));
            })

            //倒数计时
            var backward = function(){
                numz--;
                if(numz>0){
                    $(".backward span").html(numz);
                }else{
                    $(".backward").remove();
                }
                setTimeout(backward,1000)
            }

            var numz = 4;
            backward();

        })
    </script>
    <script type="text/javascript">
        if (/Android/gi.test(navigator.userAgent)) {
            window.addEventListener('resize', function () {
                if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
                    window.setTimeout(function () {
                        document.activeElement.scrollIntoViewIfNeeded();
                    }, 0);
                }
            })
        }
    </script>
</head>
<body>
{{--<div id="startPage">--}}
{{--</div>--}}
<div class="space">
    <div class="stars">
        <div class="star"></div>
        <div class="star pink"></div>
        <div class="star blue"></div>
        <div class="star yellow"></div>
    </div>
</div>
<!-- 顶部状态栏 -->
<div id="topBar">
    <span>剩余<i id="rTime"></i>秒</span>
    <span><i class="rIcon"> </i><i class="rX">x</i><i id="rNum">0</i></span>
</div>

<ul  id="main" class="main">
</ul>
</body>
</html>